<template>
    <el-config-provider :locale="locale">
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" height="430">
            <!-- 展开行内容 -->
            <el-table-column type="expand" width="60px" fixed>
                <template #default="props">
                    <el-descriptions class="descriptions" title="订单详情" :column="2" style="width: 75%" border>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    <el-icon :style="iconStyle">
                                        <user />
                                    </el-icon>
                                    顾客信息
                                </div>
                            </template>
                            <el-tag style="margin-right: 2px">{{ props.row.user.name }}</el-tag>
                            <el-tag style="margin-right: 2px" v-if="props.row.user.sex == '0'">男</el-tag>
                            <el-tag style="margin-right: 2px" v-if="props.row.user.sex == '1'">女</el-tag>
                            <el-tag style="margin-right: 2px" v-if="props.row.user.age">{{
                                props.row.user.age }}岁</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    <el-icon :style="iconStyle">
                                        <iphone />
                                    </el-icon>
                                    联系电话
                                </div>
                            </template>
                            <el-tag>{{ props.row.user.telephone }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    <el-icon :style="iconStyle">
                                        <location />
                                    </el-icon>
                                    住址
                                </div>
                            </template>
                            <el-tag style="margin-right: 5px">{{ props.row.user.address }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    <el-icon :style="iconStyle">
                                        <ChatLineSquare />
                                    </el-icon>
                                    订单详情
                                </div>
                            </template>
                            <el-tag>{{ props.row.orderDetail }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item v-if="props.row.manager">
                            <template #label>
                                <div class="cell-item">
                                    <el-icon :style="iconStyle">
                                        <user />
                                    </el-icon>
                                    受理人信息
                                </div>
                            </template>
                            <el-tag style="margin-right: 2px">{{ props.row.manager.name }}</el-tag>
                            <el-tag>{{ props.row.manager.telephone }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item v-if="props.row.name && props.row.telephone">
                            <template #label>
                                <div class="cell-item">
                                    <el-icon :style="iconStyle">
                                        <user />
                                    </el-icon>
                                    服务人员信息
                                </div>
                            </template>
                            <el-tag style="margin-right: 2px">{{ props.row.name }}</el-tag>
                            <el-tag>{{ props.row.telephone }}</el-tag>
                        </el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-table-column>

            <el-table-column prop="id" label="订单编号" fixed />
            <el-table-column prop="uId" label="下单人员">
                <template #default="scope">
                    {{
                        scope.row.user.name
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="manager" label="受理人">
                <template #default="scope">
                    <p v-if="scope.row.manager">{{ scope.row.manager.name }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="typeId" label="服务类别" width="200%">
                <template #default="scope">
                    {{ scope.row.typeB.serviceName }}-{{ scope.row.typeS.serviceName }}
                </template>
            </el-table-column>
            <el-table-column prop="orderDetail" label="订单详情" width="120%" />
            <el-table-column prop="orderDate" label="下单时间" sortable width="120%" />
            <el-table-column prop="acceptDate" label="受理日期" width="120%" />
            <el-table-column prop="finishDate" label="完成日期" width="120%" />
            <el-table-column prop="rate" label="客户评分" width="100%">
                <template #default="scope">
                    <p v-if="scope.row.rate === 1">☆</p>
                    <p v-if="scope.row.rate === 2">☆☆</p>
                    <p v-if="scope.row.rate === 3">☆☆☆</p>
                    <p v-if="scope.row.rate === 4">☆☆☆☆</p>
                    <p v-if="scope.row.rate === 5">☆☆☆☆☆</p>
                </template>
            </el-table-column>
            <el-table-column prop="orderState" label="订单状态" :filters="[
                { text: '待受理', value: 0 },
                { text: '已取消', value: 1 },
                { text: '待完成', value: 2 },
                { text: '待评分', value: 3 },
                { text: '已完成', value: 4 },
            ]" :filter-method="filterState" filter-placement="bottom-end" width="120px">
                <template #default="scope">
                    <p v-if="scope.row.orderState == '0'" style="color: #ff0000"><el-icon :style="iconStyle">
                            <Pointer />
                        </el-icon>待受理</p>
                    <p v-if="scope.row.orderState == '1'" style="color: #778899"><el-icon :style="iconStyle">
                            <Close />
                        </el-icon>已取消</p>
                    <p v-if="scope.row.orderState == '2'" style="color: #FFA500"><el-icon :style="iconStyle">
                            <Clock />
                        </el-icon>待完成</p>
                    <p v-if="scope.row.orderState == '3'" style="color: #4169E1"><el-icon :style="iconStyle">
                            <ChatLineSquare />
                        </el-icon>待评分</p>
                    <p v-if="scope.row.orderState == '4'" style="color: #67c23a"><el-icon :style="iconStyle">
                            <Select />
                        </el-icon>已完成</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="120px">
                <template #default="scope">
                    <el-button size="small" type="primary" :disabled="String(scope.row.orderState) !== '0'"
                        @click="handleEdit(scope.$index, scope.row)">受理</el-button>
                </template>
            </el-table-column>

        </el-table>
        <div v-if="tableData.length === 0" style="text-align: center; margin-top: 20px;">
            <el-button type="primary" @click="addTestData">添加测试数据</el-button>
        </div>
        <!-- 分页 -->
        <div style="text-align: -webkit-center">
            <el-pagination v-model:current-page="currentPage" :page-size="10" v-model:total="total"
                :background="background" layout="prev, pager, next, jumper,total" @current-change="handleCurrentChange"
                style="width: max-content;margin-top: 25px" />
        </div>
    </el-config-provider>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { Pointer, Clock, ChatLineSquare, Select, Iphone, Location, User, Close } from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

//语言
const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

// 检查用户权限
const checkUserRole = () => {
    const user = JSON.parse(localStorage.getItem('user'))
    if (!user) {
        console.warn('用户信息不存在:', {
            localStorage: {
                token: localStorage.getItem('token'),
                user: localStorage.getItem('user'),
                roleId: localStorage.getItem('roleId')
            },
            sessionStorage: {
                user: sessionStorage.getItem('user')
            }
        })
        ElMessage.error('请先登录')
        router.push('/login')
        return false
    }
    return true
}

// 检查操作权限
const checkOperationPermission = () => {
    try {
        const user = JSON.parse(localStorage.getItem('user'))
        const roleId = localStorage.getItem('roleId')
        
        console.group('权限检查')
        console.log('用户信息:', user)
        console.log('角色ID:', roleId)
        console.log('存储状态:', {
            localStorage: {
                token: localStorage.getItem('token'),
                user: localStorage.getItem('user'),
                roleId: localStorage.getItem('roleId')
            },
            sessionStorage: {
                user: sessionStorage.getItem('user')
            }
        })

        if (!user) {
            console.warn('用户信息不存在')
            console.groupEnd()
            ElMessage.error('请先登录')
            return false
        }

        // 管理员(roleId=1)和医护人员(roleId=3)有权限操作
        if (roleId === '1' || roleId === '3') {
            console.log('✅ 用户有操作权限')
            console.groupEnd()
            return true
        }

        console.warn('❌ 用户无操作权限')
        console.groupEnd()
        ElMessage.error(`您没有操作权限 (角色ID: ${roleId})`)
        return false
    } catch (error) {
        console.error('权限检查出错:', error)
        console.groupEnd()
        ElMessage.error('权限检查出错')
        return false
    }
}

onMounted(() => {
    console.group('组件加载')
    console.log('健康订单组件加载:', {
        localStorage: {
            token: localStorage.getItem('token'),
            user: localStorage.getItem('user'),
            roleId: localStorage.getItem('roleId')
        }
    })
    console.groupEnd()
    if (!checkUserRole()) return
    serviceOrderStore.initHealth()
})

//斑马条
const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 1 ? 'success-row' : ''
}

//按订单状态筛选
const filterState = (value, row) => {
    return Number(row.orderState) === value
}

//图标
const size = ref('')
const iconStyle = computed(() => {
    const marginMap = {
        large: '10px',
        default: '6px',
        small: '4px'
    }
    return {
        marginRight: marginMap[size.value] || marginMap.default
    }
})

import { storeToRefs } from "pinia";
import { useServiceorderStore } from "../../../stores/serviceorder.js";
const serviceOrderStore = useServiceorderStore()
const { currentPage, total, background, tableData, dialogFormVisible } = storeToRefs(serviceOrderStore)
const handleCurrentChange = (currentPage) => {
    serviceOrderStore.currentPage = currentPage
    // serviceOrderStore.pageSize = pageSize
    serviceOrderStore.initHealth()
}
serviceOrderStore.initHealth()
const handleEdit = (index, row) => {
    if (!checkOperationPermission()) return
    serviceOrderStore.preInfo4HealthEdit(index, row)
}

const addTestData = () => {
    serviceOrderStore.addTestData()
}
</script>

<style scoped>
.box-card {
    width: 99%;
    height: 95%;
    margin-top: 12px;
    border-radius: 12px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.descriptions {
    margin-top: 20px;
}
</style>

<style>
.el-table .success-row {
    --el-table-tr-bg-color: #c6e2ff
}
</style>